<template>
  <div class="destineMeal">
    <ball-header :leftArrow="false" title="预订套餐" :border="false" z-index="5">
      <div slot="left" @click="$router.back(-1)"><van-icon name="arrow-left" size="24" color="#000000" /></div>
      <div slot="right">
        <a href="tel:400-0165789">
          <van-button plain type="info" class="page-right acea-row row-middle" size="small"><van-icon size="18" name="phone-o" style="margin-right:5px;" />客服</van-button>
        </a>
      </div>
    </ball-header>
    <!-- <div class="part01 acea-row row-column">
      <span>出发时间：{{mealDate.title}} </span>
      <span v-show="false">Teetime：{{mealTime.title}}</span>
    </div> -->
    <div class="part02 acea-row row-column">
      <div class="itemt item acea-row row-between-wrapper ">
        <span class="title">出发时间</span>
        <span class="price">{{mealDate.title}}</span>
      </div>
      <div class="item acea-row row-between-wrapper "><span class="title">价格明细</span></div>
      <div class="itemt2 item acea-row row-between-wrapper ">
        <span class="title">{{mealList.title}}</span>
        <span class="price">￥{{mealList.guest_price}}</span>
      </div>
      <div class="itemt2 item acea-row row-between-wrapper ">
        <span class="title">服务费</span>
        <span class="price">￥{{mealList.serviceprice}}</span>
      </div>
      <div class="itemt item acea-row row-between-wrapper ">
        <span class="title">购买数量</span>
        <van-stepper @change="stepperChange" />
      </div>
      <div class="item acea-row row-middle row-right">
        <span class="title">支付总额</span>
        <span class="totalPrice">￥{{sumTotalPrice()}}</span>
      </div>
    </div>
    <div class="part03">
      <van-field
        v-model="message"
        rows="2"
        label="留言"
        type="textarea"
        maxlength="200"
        placeholder="请输入留言"
        show-word-limit
      />
    </div>
    <div class="part04">
      <van-coupon-cell
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        @click="showCoupon = true"
      />
    </div>
    <div class="part05">
      <van-submit-bar button-color="#1989fa" :price="sumTotalPrice()*100" button-text="立即下单" @submit="go2buy">
        <span class="acea-row row-middle" @click="show = true">费用明细<van-icon name="arrow-down" size="14" /></span>
      </van-submit-bar>
    </div>
    <van-popup
      v-model="showCoupon"
      round
      position="bottom"
      style="height: 90%; padding-top: 4px;"
    >
      <van-coupon-list
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        :disabled-coupons="disabledCoupons"
        :show-exchange-bar="false"
        :show-close-button="true"
        @change="onChangeCoupons"
      />
      <div style="display:none" class="popGoApp acea-row row-middle">
        <div class="pic"><img :src="logo" alt=""></div>
        <div class="content acea-row row-column">
          <p>小白球，让高尔夫更简单</p>
          <span>快来下载app使用红包吧</span>
        </div>
        <div class="btn">下载</div>
      </div>
    </van-popup>
    <van-popup v-model="show" round  position="bottom" :style="{ height: '30%' }" >
      <div class="go2buyPop">
        <div class="title acea-row row-column row-middle">
          <span>金额优惠明细</span>
          <p>*实际优惠金额已下单页为准</p>
        </div>
        <div class="list acea-row row-column" ref="popList">
          <div class="item acea-row row-column">
            <div class="itemTop acea-row row-middle row-between">
              <p>{{mealList.title}}</p>
              <span class="price">￥{{mealList.guest_price}} x{{counts}}</span>
            </div>
            <div class="itemTop acea-row row-middle row-between">
              <p>服务费</p>
              <span class="price">￥{{mealList.serviceprice}} x{{counts}}</span>
            </div>
            <div class="itemTop acea-row row-middle row-between" v-if="usingCoupon">
              <p>优惠券</p>
              <span class="price">-￥{{usingCoupon.value}}</span>
            </div>
            <!-- <div class="itemBottom">现金券</div> -->
          </div>
        </div>
        <!-- <div class="totalPrice acea-row row-middle row-between">
          <p>总计</p>
          <span class="price">￥ 6620</span>
        </div>   -->
        <van-submit-bar button-color="#1989fa" :price="sumTotalPrice()*100" button-text="立即下单" @submit="go2buy">
          <span class="acea-row row-middle" @click="show = false">费用明细<van-icon name="arrow-up" size="14" /></span>
        </van-submit-bar>
      </div>
    </van-popup>
  </div>
</template>

<script>
import ballHeader from 'components/header'
import logo from 'static/images/logo.png'
import api from 'api'
import { Toast } from 'vant';
import config from 'api/config.js'


const coupons = [{
  available: 1,
  condition: '无使用门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '优惠券名称',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '1.5',
  unitDesc: '元',
}];

export default {
  components:{
    ballHeader,
  },
  data() {
    return {
      routerUrl:config.routerUrl,
      logo,
      message:'',
      showCoupon:false,
      chosenCoupon: -1,
      coupons:[], //优惠券
      disabledCoupons:[], //不可用优惠券
      usingCoupon:null,
      show:false,
    }
  },
  mounted() {
    this.sumList()
  },
  activated() {
    // console.log("activated",this.price)
    // this.$store.commit("meal/sumPrice")
    this.usingCoupon = null
    this.onChangeCoupons(-1)
    this.getCoupon()
  },
  methods: {
    getCoupon(){
      return new Promise((resolve, reject) => {
        api.get("/order/getCoupons").then(e=>{
          let coupons = []
          let disabledCoupons = []
          for(let i of e.data){
            let o = {
              id:i.id,
              name:i.coupon_title,
              condition:Number(i.use_min_price) > 0?"满"+i.use_min_price+"可用":"无使用门栏",
              endAt:i.endAt,
              startAt:i.startAt,
              reason:this.getReason(i), //不可用原因
              valueDesc:i.coupon_price,
              value:i.coupon_price*100,
              unitDesc:"元"
            }
            if(this.checkCoupon(i)){
              coupons.push(o)
            }else{
              disabledCoupons.push(o)
            }
          }
          this.coupons = coupons
          this.disabledCoupons = disabledCoupons
        })
      });
    },
    checkCoupon(i){ //检查优惠券
      if(i.iswap == 1 && i.istimevalid == 1 && this.price.total_price >= Number(i.use_min_price) && (i.usetype == 2 || i.usetype == 3) && (i.course_id == 0 || i.course_id == this.store.id)){
        return true
      }else{
        return false
      }
    },
    getReason(i){
      if(i.istimevalid == 0){
        return "不可用"
      }else if(i.course_id != 0 && i.course_id != this.store.id){
        return "当前球场不可用"
      }else if(i.usetype == 1 || i.usetype == 4){
        return "套餐不可用"
      }else{
        return "移动端不可用"
      }
    },
    sumTotalPrice(){
      let total_price = this.price.total_price
      if(this.usingCoupon){
        total_price = total_price - this.usingCoupon.value
      }
      return total_price?total_price:0;
    },
    onChangeCoupons(index){
      if(index != -1){
        let couponsDetail = this.coupons[index]
        let usingCoupon = {
          id:couponsDetail.id,
          value:(couponsDetail.value/100).toFixed(2)
        }
        this.usingCoupon = usingCoupon
      }else{
        this.usingCoupon = null
      }
      this.showCoupon = false;
      this.chosenCoupon = index;
    },
    go2buy(){
      let params = {}
      let price = JSON.parse(JSON.stringify(this.price))
      // price.total_price = this.sumTotalPrice()
      if(this.usingCoupon){
        price.coupon_price = this.usingCoupon.value
        params.coupon_id = this.usingCoupon.id
      }
      params.courseid = this.$store.state.common.courseid  //球场id
      params.product_id = this.mealList.id //订场id
      params.message = this.message //留言
      params.type = 2
      params.price = JSON.stringify(price)
      params.date = parseInt(this.mealDate.date) + parseInt(Number(this.mealTime.time)*3600)
      params.member_id = this.userInfo.member.id
      params.iswap = 1
      params.counts = this.counts
      api.post("/order/orderCourse",params).then(e=>{
        this.$router.push(this.routerUrl+"/go2buy/"+e.data.order_id)
      })
      // console.log("go2buy",params)
    },
    stepperChange(e){
      this.$store.commit("meal/changeNum",e)
      this.$store.commit("meal/sumPrice")
    },
    sumList(){
      
    }
  },
  computed:{
    store(){
      return this.$store.state.common.storeData
    },
    mealDate(){
      return this.$store.state.meal.courseDate
    },
    mealTime(){
      return this.$store.state.meal.courseTime
    },
    mealList(){
      return this.$store.state.meal.list
    },
    price(){
      return this.$store.state.meal.price
    },
    userInfo(){
      return this.$store.state.user.userInfo
    },
    counts(){
      return this.$store.state.meal.num
    }
  }
}
</script>

<style scoped>
  .van-button__text{
    display: flex;
    align-items: center;
  }
  .part05 >>> .van-submit-bar__bar{
    height: 60px;
  }
  .destineMeal{
    min-height: 100vh;
    background-color: #f2f3f5;
  }
  .destineMeal .part01{
    padding: 25px 20px;
    font-size: 26px;
    margin-top: 20px;
  }
  .destineMeal .part01 span:first-of-type{
    margin-bottom: 20px;
  }
  .destineMeal .part02{
    margin-top: 20px;
  }
  .destineMeal .part02 .item{
    padding: 0 20px;
    height: 90px;
    background-color: #ffffff;
    border-bottom: 1px solid #dddddd;
  }
  .destineMeal .part02 .itemt{
    height: auto !important;
    padding: 20px 20px;
  }
  .destineMeal .part02 .itemt2{
    height: auto !important;
    padding: 20px 20px 20px 40px;
  }
  .destineMeal .part02 .item .title{
    max-width: 480px;
    color: #555555;
    font-size: 26px;
    line-height: 32px;
    display: block;
    /* overflow: hidden;
    text-overflow:ellipsis; 
    white-space: nowrap; */
  }
  .destineMeal .part02 .item .price{
    color: #282828;
    font-size: 24px;
  }
  .destineMeal .part02 .item .totalPrice{
    color: #ff3300;
    margin-left: 15px;
    font-size: 26px;
  }
  .destineMeal .part03{
    padding: 20px 25px;
    margin-top: 20px;
    background-color: #ffffff;
  }
  .destineMeal .part03 .title{
    color: #555555;
    font-size: 26px;
  }
  .destineMeal .part03 >>> .van-field{
    padding: 0;
  }
  .destineMeal .part04{
    margin-top: 20px;
    background-color: #ffffff;
  }
  .destineMeal .part05{

  }
  .go2buyPop{
  }
  .go2buyPop .title{
    padding: 30px 0;
  }
  .go2buyPop .title span{
    color: #555555;
  }
  .go2buyPop .title p{
    color: #888888;
    margin-top: 15px;
  }
  .go2buyPop .list {
    padding: 0 40px;
  }
  .go2buyPop .list .item .itemTop{
    margin-bottom: 10px;
  }
  .go2buyPop .list .item .itemTop p{
    width: 520px;
    font-size: 26px;
    line-height: 32px;
  }
  .go2buyPop .list .item .itemTop .price{
    color: #ff6600;
    font-size: 26px;
  }
  .go2buyPop .list .item .itemBottom{
    margin-top: 20px;
    font-size: 26px;
  }
  .go2buyPop .totalPrice{
    padding: 0 40px;
    margin-top: 65px;
  }
  .go2buyPop .totalPrice p{
    font-size: 26px;
  } 
  .go2buyPop .totalPrice .price{
    color: #ff6600;
    font-size: 26px;
  }
  .destineMeal .popGoApp{
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: #6ecf9d;
    padding: 10px 50px 10px 20px;
    box-sizing: border-box;
    z-index: 1000;
  }
  .destineMeal .popGoApp .pic{
    width: 80px;
    height: 80px;
  }
  .destineMeal .popGoApp .content{
    color: #ffffff;
    margin-left: 10px;
    flex: 1;
  }
  .destineMeal .popGoApp .content p{
    font-size: 24px;
  }
  .destineMeal .popGoApp .content span{
    font-size: 30px;
    margin-top: 10px;
  }
  .destineMeal .popGoApp .btn{
    width: 150px;
    height: 50px;
    background-color: #ffffff;
    color: #125432;
    line-height: 50px;
    text-align: center;
    border-radius: 50px;
    font-size: 26px;
  }
</style>